<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login page</title>
    <style type="text/css">
        /*theme style*/
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html,body{
            width: 100%;
            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        }

        /*整个登录的框 居中显示*/
        .login-wrap{
            position: relative;/*对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置 */
            width: 100%;
            height: 260px;
            background-color:  #F1F6FC;
            max-width: 460px;
            margin: 15% auto 0;
            box-shadow: 30px 30px 100px #d3d3d3;/*阴影*/
            border-radius: 5px;
        }
        /*登录的表单信息*/
        .login-form{
            margin: 12px 12px 12px 12px;
            background-color: transparent;
            height: 100%;
        }
        /*显示的标题*/
        .login-form-text{
            text-align: center;
            font-size: 26px;
            line-height: 26px;
            vertical-align: middle;
            padding-top: 15px;
        }
        /*login error message*/
        .login-form-error-message{
            color: #a94442;;
            font-size: 14px;
            text-align: center;
            line-height: 14px;
            margin-bottom: -15px;
            margin-top: 10px;
        }
        /*登录的信息*/
        .login-form .login-form-group{
            font-size: 14px;
            background-color: transparent;
            height: 20px;
            padding: 15px 15px 15px 15px;
            margin-top: 15px;
        }
        /*验证的消息*/
        .login-form .login-form-lable{
            width: 80px;
            text-align: right;
            margin: 5px;
            display:inline-block;
        }
        /*容量*/
        .login-input-contair{
            width: 280px;
            height: 34px;
            border: 1px solid #ccc;
            display:inline-block;
            padding: 3px 3px 3px 5px;
            background-color: #CCC;
        }
        /*输入框*/
        .login-form .login-form-input{
            width: 96%;
            height: 28px;
            font-size: 14px;
            border: none !important;
            background-color: transparent; /*背景透明*/
            color: #808080;
            overflow: hidden;
            box-shadow: none;
            outline-style: none; /*鼠标点击的样式*/
        }
        .bg-transparent{
            background-color: transparent;
            border: none;
            margin-top: -12px;
        }
        .login-remberme{
            width: 15px;
            vertical-align: middle;
            margin-right: 3px;
        }
        .remberme-lable{
            font-size: 12px;
            text-align: center;
            line-height: 34px;
            vertical-align:middle;
            border: none;
        }
        /*登录和注册的两个按钮*/
        .button{
            height: 35px;
            width: 120px;
            font-size: 16px;
            background-color: dodgerblue;
            border: 0;
            border-radius: 5px;
            font-weight: 400;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            margin-left: 10px;
            outline-style: none; /*鼠标点击的样式*/
        }
    </style>
</head>
<body>
    <div class="login-wrap">
        <div class="login-form">
            <div class="login-form-text">登录</div>
            <div class="login-form-error-message">请输入密码</div>
            <div class="login-form-group">
                <label class="login-form-lable">账号</label>
                <div class="login-input-contair">
                    <input class="login-form-input" type="text" placeholder="账号"/>
                </div>
            </div>
            <div class="login-form-group">
                <label class="login-form-lable">密码</label>
                <div class="login-input-contair">
                    <input class="login-form-input" type="password" placeholder="密码"/>
                </div>
            </div>
            <div class="login-form-group">
                <label class="login-form-lable"></label>
                <div class="login-input-contair bg-transparent">
                    <input class="login-remberme" type="checkbox"/><lable class="remberme-lable">记住我</lable>
                </div>
            </div>
            <div class="login-form-group">
                <label class="login-form-lable"></label>
                <div class="login-input-contair bg-transparent">
                    <input class="button" type="button" value="登录"/>
                    <input class="button" type="button" value="注册"/>
                </div>
            </div>

        </div>
    </div>
</body>
</html>